// import { createBrowserHistory, createHashHistory } from 'history'
// // 1. 创建自定义history对象
// // h5的history模式(不带#)
// const customHistory = createBrowserHistory()
// // hash模式
// // const customHistory  = createHashHistory()

// // 2. 导出自定义history对象
// export default customHistory

/**
 * 获取react-router实例对象，在js中跳转页面
 */
import { useState, useEffect } from 'react';
import { createBrowserHistory, createHashHistory } from 'history';
import { Router } from 'react-router-dom';

// 1. history
// export const history = createBrowserHistory();
// 2. hash
// == 创建路由实例对象 =》作用：js中使用跳转页面 ==
export const history = createHashHistory();
// == 函数组件 => 作用：包裹根组件,注册history
export const HistoryRouter = ({ history, children }) => {

  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useEffect(() => {
    history.listen(setState);
  }, [history]);

  return <Router children={children} navigator={history} {...state} />
};



// ts版本

// export const history = createBrowserHistory();

// interface HistoryRouterProps {
//   history: typeof history;
// }

// export const HistoryRouter: React.FC<HistoryRouterProps> = ({ history, children }) => {
//   const [state, setState] = React.useState({
//     action: history.action,
//     location: history.location
//   });

//   React.useLayoutEffect(() => {
//     history.listen(setState);
//   }, [history]);

//   return React.createElement(Router, Object.assign({ children, navigator: history }, state));
// };